const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const proxy = require('http-proxy-middleware');
const webpack = require('webpack')

module.exports = {
  //配置打包入口出口名字
  entry: ["@babel/polyfill", "./src/main.js"],
  output : {
    path : path.join(__dirname, './dist/'), 
    filename: 'bundle.js' 
  },
  devtool: 'inline-source-map',
  //把index.html也打包
  plugins: [
    new htmlWebpackPlugin({
      template: './index.html'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  externals: {
    vue: 'Vue',
    'vue-loader': 'VueRouter',
    axios: 'axios',
    jquery: 'jQuery',
    ladash: '_'
  },
  //自动打包刷新
   devServer: {
    contentBase: path.join(__dirname, '/'),
    proxy:{'/api':{
      target: 'http://localhost:3000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/' 
      }
    }},
    compress: true,
    port: 9000,
    hot: true
   },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
      test: /\.less$/,
      use: [
        'style-loader',       
        'css-loader', 
        'less-loader' 
      ]
      },
      {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-transform-runtime']
        }
      }
    },
    {
      test: /\.vue$/,
      loader: 'vue-loader'
    }
    ]
  }
}